<template>
    <div v-loading="loading" class="app-container">
      <x-table v-model="searchData" :config="tableConfig" :data="tableData" :page="page" :load="getOrderByPage" />
      <orderForm v-if="dialogName == 'orderForm'" :id="propId" @refresh="getOrderByPage" :mode="mode"
        @close="closeDialog"></orderForm>
    </div>
  
  
  </template>
  
  <script>
  import { getOrderByPage, delOrderById } from '@/api/order'
  import { getToken } from '@/utils/auth'
  import orderForm from './form.vue'
  import { importDic } from '@/utils'
  
  export default {
    components: {
      orderForm
    },
    data() {
      return {
        eSDic: 'findOrderStatus',
        loading: 0,
        tableData: [],
        page: {
          pageSizes: [10, 20],
          pageSize: 10,
          pageNum: 1,
          total: 0
        },
        searchData: {
          status: 88
        },
        propId: '',
        dialogName: ''
      }
    },
  
    computed: {
      tableConfig() {
        const _this = this
        return {
          search: true,
          reset: true,
          stripe: false,
          border: true,
          highlightCurrentRow: true,
          rowClick: node => _this.$emit('cellClick', node),
          btn: [
            // { text: '新增', click: () => _this.operate('add'), icon: 'el-icon-circle-plus' }
          ],
          column: [
            { label: '订单编号', name: 'orderNumber', search: true, xType: 'input' },
            { label: '场次id', name: 'movieArrangeId', search: false, xType: 'input' },
            { label: '用户名', name: 'username', search: false, xType: 'input'},
            // { label: '影院名称', name: 'cinemaName', search: false, xType: 'input' },
            { label: '订单状态', name: 'status', search: true, xType: 'select', dic:importDic(_this.eSDic) },
            
          ],
          operate: [
            // { text: '编辑', show: true, click: data => this.operate('edit', data) },
            { text: '查看', show: true, click: data => this.operate('detail', data) },
            { text: '删除', show: true, click: _this.del },
          ]
        }
      }
    },
  
    mounted() {
      this.getOrderByPage()
    },
  
    methods: {
      getOrderByPage() {
        this.loading++
        getOrderByPage(this.searchData, this.page.pageNum, this.page.pageSize, getToken()).then(res => {
          console.log("getOrderByPage" + res)
          this.tableData = res.result.records
          this.page.total = res.result.total
        }).catch(e => console.error(e)).finally(() => this.loading--)
      },
      operate(mode, data) {
        if (mode !== 'add') {
          this.propId = data.id
          this.eSDic = 'orderStatus'
        }
        this.mode = mode
        this.dialogName = 'orderForm'
      },
      del(data) {
        this.delConfirm().then(() => {
          this.loading++
          delOrderById(data.id, getToken()).then(res => {
            console.log(data.id + 'delOrderById' + res)
            this.$message.success(res.message)
            this.getOrderByPage()
          }).catch(e => console.log(e)).finally(() => this.loading--)
        }).catch(e => console.log(e))
      },
      closeDialog() {
        this.dialogName = ''
      }
    },
  
  }
  </script>
  